<template>
  <div class="retainedAnalysis">
    <!-- 顶部区域 具有 抽样参数 近似计算参数 -->
    <div class="crumbs">
      <header class="crumbs_arr_box">
        <span>留存分析</span>
        <span class="tool_main">
          <span class="save">
            <i class="el-icon-folder-add"></i>
            保存
          </span>
          <i class="fgf"></i>
          <el-tooltip class="tool_son" effect="light" content="刷新" placement="bottom">
            <i class="el-icon-refresh"></i>
          </el-tooltip>
          <el-tooltip class="tool_son" effect="light" content="下载数据" placement="bottom">
            <i class="el-icon-download"></i>
          </el-tooltip>
          <el-popover placement="bottom" width="300" >
            <div class="block_tool">
              <span class="left">抽样设置：</span>
              <el-slider :min="1" :step="1" :max="7" class="right" :show-tooltip="false"></el-slider>
            </div>
            <i class="el-icon-more tool_son" slot="reference"></i>
          </el-popover>
        </span>
      </header>
    </div>
    <!-- config 配置面板 -->
    <config></config>
    <!-- 中间图表绘制 -->
    <panel></panel>
    <!-- 底部表格展示组件 -->
    <tableSelf></tableSelf>
  </div>
</template>
<script>
// 引入配置面板组件
import config from "./config.vue"
// 引入中间图表绘制组件
import panel from "./panel.vue"
// 引入数据展示，表格组件
import tableSelf from "./tableSelf.vue"
export default {
  name: "retainedAnalysis",
  components: {config,panel,tableSelf},
  data() {
    return {};
  },
  watch: {
    point_arr() {
      this.echart_init();
    }
  },
  methods: {},
  created() {},
  mounted() {},
  computed: {}
};
</script>

<style scoped lang="scss">
::v-deep .show_hidden {
  visibility: hidden;
  position: absolute;
  left: 0;
  top: -0.2rem;
  z-index: 10;
}
.retainedAnalysis::-webkit-scrollbar {
  display: none;
}
.block_tool {
  width: 98%;
  margin: 2px auto;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  .left {
    display: inline-block;
    width: 30%;
  }
  .right {
    display: inline-block;
    width: 70%;
  }
}
.retainedAnalysis {
  width: 98%;
  margin: 0 auto;
  box-sizing: border-box;
  height: 98.6%;
  overflow: scroll;
  .crumbs {
    .crumbs_arr_box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .tool_main {
        padding: 0 0.5rem 0 10px;
        font-size: 12px;
        font-weight: 500;
        color: #606266;
        // line-height: 44px;
        letter-spacing: 2px !important;
        .select {
          margin: 0 6px;
        }
        .fgf {
          display: inline-block;
          width: 1px;
          height: 16px;
          background: #c0c4cc;
          margin: 0 8px;
        }
        .tool_son {
          font-size: 16px;
          margin: 0 8px;
          font-size: 0.26rem;
        }
        .save {
          display: inline-block;
          font-size: 0.22rem;
          color: #007aff;
          height: 0.3rem;
          font-weight: 500;
          line-height: 0.3rem;
          margin-right: 0.1rem;
          i {
            font-size: 0.26rem;
          }
        }
        .tool_son:hover {
          color: #01b27a;
          font-weight: 600;
        }
      }
    }
  }
}
</style>
